<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row>
        <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
      </el-row>
      <el-row>
          <!-- 由于active的值为字符串,而tab中activeindex的值又要求为数字,字符串类型的值-0为数字 -->
        <el-steps :space="200" :active="activeindex-0" finish-status="success" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </el-row>
      <el-row>
          <el-form :model="saveobj" :rules="checkform" ref="ruleForm" class="demo-ruleForm" label-position="top">
        <el-tabs tab-position="left"  v-model="activeindex" :before-leave="changetab" @tab-click="clicktab()">
          <el-tab-pane label="基本信息" name="0">
                 <el-form-item label="商品名称" prop="goods_name">
                    <el-input v-model="saveobj.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="goods_price">
                    <el-input v-model="saveobj.goods_price"  type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品重量" prop="goods_weight">
                    <el-input v-model="saveobj.goods_weight"  type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="goods_number">
                    <el-input v-model="saveobj.goods_number" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品分类">
                     <el-cascader
                        v-model="selectkeys"
                        :options="typelist"
                        :props="{ expandTrigger: 'hover',label:'cat_name',value:'cat_id' }"
                        @change="handleChange"></el-cascader>
                </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">
            <!-- 遍历集合中参数名称attr_name -->
              <el-form-item v-for="(item,index) in paramslist" :label="item.attr_name" :key="index">
                <!-- 复选框分组控件 -->
                <el-checkbox-group v-model="item.attr_vals">
                  <!-- 遍历参数名称下拥有的参数 -->
                  <el-checkbox v-for="(value,key) in item.attr_vals" :label="value" :key="key" border >{{value}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <!-- 添加一个表单项 -->
            <el-form-item v-for="(item,index) in staticlist" :label="item.attr_name" :key="index">
                    <!-- 遍历出对应的输入框 -->
                    <el-input v-model="item.attr_vals"  type="text"></el-input>
                </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name="3">
            <el-upload
            list-type="picture" 
            :action="uploadApi"
            :headers="headersobj"
            :on-success="uploadSuccess"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            >
            <el-button size="small" type="primary">上传商品图片</el-button>
            <div slot="tip" class="el-upload__tip">对文件要求的提示信息</div>
          </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <quill-editor  v-model="saveobj.goods_introduce" ref="myQuillEditor"> </quill-editor>
            <el-row class="btntop">
                    <el-button type="primary" @click="save()">保存</el-button>
            </el-row>
          </el-tab-pane>
        </el-tabs>
          </el-form>
      </el-row>
    </el-card>

<!-- 图片预览的弹窗开始 -->
<el-dialog title="图片预览" :visible.sync="isShowImg" width="60%">
  <div style="width:80%;margin:0 auto;">
    <img style="width:100%" :src="imgurl">
  </div>
</el-dialog>
<!-- 图片预览的弹窗结束 -->

  </div>
</template>

<script>
export default {
  name: "goods_add",
  data() {
    return {
      isShowImg:false,//控制图片预览弹窗打开状态
      imgurl:"", //记录图片预览地址
        // 定义文件上传的地址
        uploadApi:"http://127.0.0.1:8888/api/private/v1/upload",
        // 定义文件上传的请求头,携带token信息
        headersobj:{Authorization:window.sessionStorage.getItem("token")},
        staticlist:[],//定义静态属性列表的数据源
        paramslist:[], //定义参数列表的数据源
        typelist:[], //级联下拉框的数据源
        selectkeys:[], //级联下拉框双向数据绑定的属性
        saveobj:{
            goods_name:"", //名称
            goods_price:0, //价格
            goods_number:0, //数量
            goods_weight:0, //重量
            pics:[], //该商品对应的图片数组
            goods_introduce:"",//商品描述
            goods_cat:"", //商品所属分类字符串
            attrs:[], //动态参数与静态参数属性
        },
        // 表单验证
    checkform:{
        goods_name:[
            { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
            goods_price:[
            { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
            goods_number:[
            { required: true, message: '请输入商品数量', trigger: 'blur' }
        ],
            goods_weight:[
            { required: true, message: '请输入商品重量', trigger: 'blur' }
        ],
},
      activeindex: '0' //控制步骤条激活的步数,从0开始
    };
  },
  methods: {
    save(){
       this.$refs.ruleForm.validate( async (valid) => {
          if (valid) {
     // 将selectkeys数组转为以逗号分隔的字符串后赋值给goods_cat
         this.saveobj.goods_cat=this.selectkeys.join(",");
  // 完成将所有动态属性添加到this.saveobj.attrs中
        this.paramslist.forEach((item,index)=>{
          let {attr_id,attr_vals}=item;
          this.saveobj.attrs.push( {
            attr_id:attr_id,
            attr_value:attr_vals.join(' ')
          })
        })
         // 完成将所有静态属性添加到this.saveobj.attrs中
        this.staticlist.forEach((item,index)=>{
          let {attr_id,attr_vals}=item;
                  this.saveobj.attrs.push( {
                    attr_id:attr_id,
                    attr_value:attr_vals
                  })
        })
        console.log(this.saveobj);
    let rst= await  this.$http.post("goods",this.saveobj);
    console.log(rst);
     if(rst.meta.status==201){
        this.$router.replace("/home/goods");
     }else{
       this.$message.error("添加商品失败");
     }

      // // 判断是否包含了动态参数
      //   if(this.paramslist.length==0){
      //     this.activeindex="1";
      //     this.$message.info("请选择动态参数");
      //     return;
      //   }
      //    // 判断是否包含了静态参数
      //  if(this.staticlist.length==0){
      //     this.activeindex="2";
      //     this.$message.info("请选择静态属性");
      //     return;
      //   }
      //   //判断是否选择了商品图片
      //   if(this.saveobj.pics.length==0){
      //    this.activeindex="3";
      //     this.$message.info("请选择商品图片");
      //     return;
      //   }
      //   //判断是否输入了商品描述
      //   if(this.saveobj.goods_introduce==""){
      //    this.activeindex="4";
      //     this.$message.info("请输入商品描述");
      //     return;
      //   }

      
        
          } else {
            console.log('验证不通过');
            this.activeindex="0";//显示第一个tab页
            return false;
          }
        });
    },
    // 当点击列表中的图片时触发的方法
    handlePreview(file){
    // 获取到图片预览地址,将图片预览地址赋值给imgurl
    this.imgurl=file.response.data.url;
    // 控制图片的弹窗的显示
    this.isShowImg=true;
    },
    // 移除文件列表中文件时触发的方法
    handleRemove(file){
        //获取需要移除的文件的路径
        let tmppath=file.response.data.tmp_path;
        // 从saveobj的pics中获取到需要移除文件的索引值
       let index= this.saveobj.pics.findIndex((item)=>{return item.pic==tmppath});
      //  从saveobj的pics属性中移除索引为index的数组元素
      this.saveobj.pics.splice(index,1);
      console.log(this.saveobj.pics);
    },
    // 监听文件上传成功后触发的方法
    uploadSuccess(rst){
      //将上传成功后的信息获取到后按照添加商品时所需要定义图片数组的属性规格定义对象
      const picinfo={pic:rst.data.tmp_path};//tmp_path该属性的值为图片存放的零时路径
      // 将信息添加到saveobj的pics数组中
      this.saveobj.pics.push(picinfo);
    },
      clicktab(){
        if(this.activeindex==1){
            // 调用获取参数列表的方法
             this.getparams();
        }else if(this.activeindex==2){
            // 调用静态属性列表获取的方法
            this.getstatic();
        }
      },
      // 定义根据类型id获取该类型的静态属性参数的方法,在该方法中发送请求到后台接口
       async getstatic(){
          let id=this.selectkeys[2];
          let rst= await this.$http.get(`categories/${id}/attributes`,{sel:'only'});
          if(rst.meta.status==200){
            //  将结果赋值给参数列表
              this.staticlist=rst.data;
          }else{
              this.$message.error("静态属性列表获取失败");
              return;
          }
      },
      //定义根据类型id获取该类型的动态参数的方法,在该方法中发送请求到后台接口
     async getparams(){
          let id=this.selectkeys[2];
          let rst= await this.$http.get(`categories/${id}/attributes`,{sel:'many'});
          if(rst.meta.status==200){
            //  将结果赋值给参数列表
              this.paramslist=rst.data;
          // 改变源数据的值分隔为数组,用于显示商品分类参数,将结果中attr_vals属性的值分隔为数组
          this.paramslist.forEach((item,i)=>{
              if(item.attr_vals){
                // 判断当前参数是否有值,当有值时则分隔为数组,当没有值时则赋值为空数组
              item.attr_vals=  item.attr_vals.length===0?[]: item.attr_vals.split(' ');
              }
            })
          }else{
              this.$message.error("参数列表获取失败");
              return;
          }
      },
    // 当切换tab时触发的方法
      changetab(form,to){
        //   form:第一个参数表示即将离开的tab的name的值
        //to:第二个参数表示即将进入的tab的name的值
          //当表单验证成功后即验证是否选择了三级分类
           if(this.selectkeys.length!=3){
                this.$message.error("请选择第三级分类");
                  return false;
               }
            return true; 
      },
    //   当级联选择器值发生变化时触发的方法
    handleChange(){
        if(this.selectkeys.length!=3){
            this.selectkeys=[]; //清空选择
            return; 
        }
    },
    //   查询商品分类的方法
       async querytype(){
         let rst= await this.$http.get("categories");
         if(rst.meta.status==200){
             this.typelist=rst.data;
         }else{
             this.$message.error("获取商品分类列表");
         }
        }
  },
  mounted() {
    //   调用查询商品分类的方法
        this.querytype();
  }
};
</script>

<style>
.el-steps {
  margin: 15px;
}
.el-step__title {
  font-size: 13px;
}
.el-checkbox{
  margin:0 5px !important;
}
.ql-editor{
  min-height: 360px !important;
}
.btntop{
  margin-top: 20px;
}
</style>